<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">成绩分析</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view>
			<uni-card title="本章答题成绩" :is-shadow="true" extra="点击查看详情">
				<view class="qiun-charts">
					<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
				</view>
			</uni-card>
			<uni-card title="历史成绩曲线" :is-shadow="true" extra="点击查看详情">
				<view class="qiun-charts">
					<canvas canvas-id="canvasLine" id="canvasLine" class="charts" @touchstart="touchLine"></canvas>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
import uniCard from '@/components/third_party/uni-card/uni-card.vue';
import uCharts from '@/components/third_party/u-charts/u-charts.js';
import {COURSE_API} from '@/API.js';
import {GetData} from './dataparser.js';
var _self;

export default {
    components: {
        uniCard,
    },
    data() {
        return {
            course_id: '',
            course_chapter_id: '',
            course_data: '',
            chapter_data: '',
            canvaLine: null,
            canvaColumn: null,
            cWidth: 0,
            cHeight: 0,
            pixelRatio: 1,
            serverData: 0,
            Line: {},
            Column: {}
        };
    },
    onLoad(options) {
        _self = this;
        this.cWidth = uni.upx2px(750);
        this.cHeight = uni.upx2px(500);
        this.course_id = options.course_id;
        this.course_chapter_id = options.course_chapter_id;
        this.getServerData();
    },
    methods: {
        getServerData() {
            uni.request({
                url: COURSE_API.transcript.url,
                method: COURSE_API.transcript.method,
                header: {'http-token': getApp().globalData.user.token},
                data: {'course_id': this.course_id},
                success: (data) => {
                    this.course_data = data;
                    var result = GetData(data, this.course_chapter_id);
                    _self.Column = result.Column;
                    _self.Line = result.Line;
                    _self.chapter_data = result.chapter_data;
                    _self.showColumn('canvasColumn', _self.Column);
                    _self.showLine('canvasLine', _self.Line);
                },
                fail: (data) => {
                    console.log(data);
                }
            });
        },
        showColumn(canvasId, chartData) {
            this.canvaColumn = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: 'column',
                dataPointShape: false,
                fontSize: 11,
                background: '#FFFFFF',
                pixelRatio: _self.pixelRatio,
                animation: true,
                categories: chartData.categories,
                series: chartData.series,
                xAxis: {
                    disableGrid: true,
                    disabled: true
                },
                yAxis: {
                    gridType: 'solid',
                    gridColor: '#CCCCCC',
                    min: 0,
                    max: 9,
                    splitNumber: 9,
                    format: (val) => {
                        return val.toFixed(0);
                    }
                },
                dataLabel: false,
                width: _self.cWidth * _self.pixelRatio * 0.8,
                height: _self.cHeight * _self.pixelRatio,
                extra: {
                    column: {
                        type: 'meter',
                        width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length,
                        meter: {
                            //外层边框的宽度
                            border: 4,
                            //内部填充颜色
                            fillColor: '#E5FDC3'
                        }
                    }
                }
            });
        },
        touchColumn(e) {
            this.canvaColumn.showToolTip(e, {
                format: function(item, category) {
                    if (typeof item.data === 'object') {
                        return category + ' ' + item.name + ':' + item.data.value;
                    } else {
                        return category + ' ' + item.name + ':' + item.data;
                    }

                }
            });
        },
        showLine(canvasId, chartData) {
            this.canvaLine = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: 'line',
                dataPointShape: true,
                fontSize: 11,
                background: '#FFFFFF',
                pixelRatio: _self.pixelRatio,
                animation: true,
                categories: chartData.categories,
                series: chartData.series,
                xAxis: {
                    disableGrid: true,
                    disabled: true
                },
                yAxis: {
                    gridType: 'solid',
                    gridColor: '#CCCCCC',
                    min: 0,
                    max: 9,
                    splitNumber: 9,
                    format: (val) => {
                        return val.toFixed(0);
                    }
                },
                width: _self.cWidth * _self.pixelRatio * 0.8,
                height: _self.cHeight * _self.pixelRatio,
                extra: {
                    line: {
                        type: 'straight',
                        color: '#E5FDC3'
                    },
                }
            });
        },
        touchLine(e) {
            this.canvaLine.showToolTip(e, {
                textList: [{text: ''}, {text: ''}, {text: ''}, {text: ''}],
                format: function(item, category) {
                    this.textList = [{text: category.chapter_title},
                        {text: '正确率:' + category.rate},
                        {text: '总分:' + category.full_score},
                        {text: '得分:' + category.my_score}];
                },
            });
        },
        toJSON(e) {
            return JSON.stringify(e);
        }
    }
};
</script>
<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
